<!-- 
	date:2023-06-28
	author:xiaoya
	desc:合同维保统计电梯明细页面
 -->
<template>
  <view class="myWrapper">
    <view class="top_tabs">
      <view class="tabs">
        <view :class="['tabs-item',tabIdx === 1?'act':'']" @click="changeTab(1)">
          维保中电梯
          <view v-if="tabIdx === 1"></view>
        </view>
        <view :class="['tabs-item',tabIdx === 2?'act':'']" @click="changeTab(2)">
          暂停维保电梯
          <view v-if="tabIdx === 2"></view>
        </view>
      </view>
      <view class="approveStatus" v-if="tabIdx === 1">
        <view v-for="(item, index) in statusList" :key="index"
          :class="[statusActive === index ? 'apptop active' : 'apptop']" @click="changeStatus(item,index)">{{
            item.name
          }}
        </view>
      </view>
    </view>

    <view class="item_content">
      <view class="content_L">
        <view class="item_top" v-if="listData.length > 0">
          <view>共<text>{{ totalObj.buildingCounts || 0 }}</text>个项目
            (<text>{{ totalObj.elevatorCounts || 0 }}</text>台电梯)
          </view>
        </view>
        <view class="L_text" v-for="(item,i) in listData" :key="i">
          <view class="L_container">
            <view class="container_left">
              <image src="@/static/images/index/buildIcon.svg" mode=""></image>
            </view>
            <view class="container_Cont">
              <view class="L_one">
                <view>{{ item.buildingName }}</view>
                <view>{{ (item.list || []).length }}</view>
                <!-- <uni-icons color="#999" size="14" type="arrowright" /> -->
              </view>
              <view class="L_two">
                <text>{{ item.buildingAddress }}</text>
                <text>{{ item.tenantNames || '' }}</text>
              </view>
            </view>
            <!-- <view class="container_right">
              <view class="trrow">
                <view
                  :style="true ? 'transform:rotate(135deg);transition: 0.3s all;' : 'transition: 0.3s all;transform:rotate(-45deg)'">
                </view>
              </view>
            </view> -->
          </view>

          <view class="content" v-for="(pro ,c) in item.list" :key="c" >
            <view class="cont_L">
              <view class="contElevar">
                <view class="contElevar_Left">
                  <view class="contTitle" style="margin-bottom: 12rpx;">
                    <text style="color: #333;font-weight: 600; font-size: 28rpx ">{{ pro.elevatorAddress}}</text>
                  </view>
                  <view v-if="tabIdx === 1" class="info" :style="{color:['#666666','#E02020','#F79700'][[5,6,7].includes(pro.maintainStatus) ? 1 : pro.maintainStatus-2]}">
                    {{ pro.maintainStatusnName}}
                    <block v-if="pro.maintainStatus !== 2 || (pro.maintainStatus === 2 && pro.contractExtStatus === 3)">
                      <text v-show="pro.desc">|</text>
                      {{ pro.desc || ''}}
                    </block>
                  </view>
                  <view v-if="tabIdx === 2" class="info">{{ pro.maintainStatusnName || '丢保' }}</view>
                </view>
              </view>
             
            </view>
          </view>

        </view>
        <view v-show="isLoadMore"><uni-load-more :status="loadStatus"></uni-load-more></view>
        
      </view>
    </view>
    <view style="margin-top: 50rpx;" v-if="listData.length <= 0">
      <default-block ></default-block> 
    </view>

  </view>
</template>

<script>
import defaultBlock from '../components/default.vue';
import {getBuildingCount,getElevatorListInfo} from '@/apis/contract.js';

export default {
	components:{
		defaultBlock
	},
	data() {
		return {
			statusList: [
				{name:'全部',ids:0},
				{name:'脱保(待续签)',ids:1},
				{name:'非在保(拟定保养)',ids:4},
				{name:'在保(合同期内)',ids:2},
				{name:'在保(合同期内)即将到期',ids:11},
			],
			statusArr: ['部门', '责任人',],
			statusActive: 0,
			tabIdx: 1,
			typeList: [
				{ name: '部门管理电梯', id: 1 },
				{ name: '个人管理电梯', id: 2 },
			],
			totalObj:{},
			pages:{
				size:20,
				current:1
			},
			isLoadMore:false,
			loadStatus: 'loading',
			listData:[],
			seleType:0,
		};
	},
	created() {
    
	}, 
	onLoad(opt) {
		let nums = Number(opt.type);
		if (nums) {
			this.tabIdx = nums;
			this.seleType = nums === 1 ? 0 : 8;
		}
		this.inits();
	},
  
	methods: {

		inits() {
			let objs = {
				type:this.seleType,// 1脱保 2在保
				size:this.pages.size,
				current:this.pages.current,
			};
			uni.showLoading({
				title: '加载中'
			});
			getBuildingCount({
				type:objs.type,
			}).then(res=>{// 电梯列表统计
				if (res.code === 200) {
					this.totalObj = res.data || {};
				}
			});
			getElevatorListInfo(objs).then(res=>{
				if (res.code === 200) {
					let arr = res.data.records || [];
					this.listData = this.listData.concat(arr);
					if (arr.length < this.pages.size) {
						this.isLoadMore = true;
						this.loadStatus = 'noMore';
					} else {
						this.isLoadMore = false;
					}
					uni.hideLoading();
				}
			});
		},
		onReachBottom() {
			console.log('下拉加载', this.pages.current);
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.pages.current += 1;
				this.inits();
			}
		},
		// 
		changeTab(index) {
			this.tabIdx = index;
			if (index === 1) {
				this.statusActive = 0;
				this.seleType = 0;
			} else {
				this.seleType = 8;
			}
			this.pages.current = 1;
			this.isLoadMore = false;
			this.listData = [];
			this.inits();
		},
		// 在保分类点击搜索
		changeStatus(obj,idx) {
			this.statusActive = idx;
			this.pages.current = 1;
			this.isLoadMore = false;
			this.listData = [];
			if (this.tabIdx === 1) {// 在保
				this.seleType = obj.ids;
			}
			this.inits();
		},
	}
};
</script>
<style>
page {
  background: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.myWrapper {
  .top_tabs {
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;

  }

  .tabs {
    display: flex;
    align-items: flex-end;
    border-bottom: 2rpx solid #eeeeee;
    height: 74rpx;

    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .3s all;
      color: #93b1c7;
      font-size: 26rpx;
      // border-bottom: 4rpx solid #ffffff;
      margin: 0 20rpx;
      padding: 16rpx 0;
      position: relative;

      view:nth-of-type(1) {
        position: absolute;
        bottom: 0rpx;
        width: 120rpx;
        border-bottom: 4rpx solid #0091ff;
      }

    }

    .act {
      // border-color: #0091ff;
      color: #0091ff;
      font-size: 30rpx;
      font-weight: bold;
    }

  }

  .approveStatus {
    // height: 88rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    // overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    // position: relative;
    border-bottom: 2rpx #eee solid;
    overflow-x: auto;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    scrollbar-color: transparent transparent; /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
    .apptop {
      font-size: 26rpx;
      padding: 6rpx 20rpx;
      color: #666;
      margin-right: 15rpx;
      border-radius: 26rpx;
      background-color: #f3f6f8;

    }

    .active {
      color: #0091FF;
      background-color: #dcf0ff;
    }
  }

  .item_content {
    display: flex;
    // flex-direction: row;
    // justify-content: center;
    width: 710rpx;
    margin: 0 auto;
    overflow: auto;

    .item_top {
      margin: 20rpx 40rpx 20rpx 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;

      text {
        color: #0091ff;
      }
    }

    .content_L {
      .L_text {
        background-color: #ffffff;
        width: 710rpx;
        display: flex;
        flex-direction: column;
        margin-bottom: 20rpx;
        border-radius: 8rpx;

        .L_container {
          display: flex;
          border-bottom: 2rpx #eee solid;
          .container_left {
            // width: 60rpx;
            // flex: 0 0 60rpx;
            margin: 20rpx 20rpx 20rpx 20rpx;

            image {
              width: 32rpx;
              height: 32rpx;
            }
          }

          .container_Cont {
            flex: 1;
            margin: 20rpx 20rpx 0 0;

            .L_one {
              // display: block;
              font-size: 26rpx;
              font-weight: 600;
              color: #333333;
              display: flex;
              align-items: center;
              view:nth-of-type(1){
                max-width: 560rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              view:nth-of-type(2){
                font-weight: 400;
                // padding: 0rpx 2rpx;
                background: #e9e9e9;
                border-radius: 50%;
                font-size: 24rpx;
                margin-left: 5rpx;
                height: 28rpx;
                text-align: center;
                min-width: 28rpx;
                line-height: 28rpx;
              }
             
            }

            .L_two {
              display: block;
              font-size: 24rpx;
              color: #999999;
              margin: 0rpx 0 20rpx 0;
              width: 560rpx;
              text{
                display:block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
             
            }
          }

          .container_right {
            display: flex;
            width: 150rpx;

            .trrow {
              margin-top: 15rpx;

              view {
                width: 18rpx;
                height: 18rpx;
                border-left: 2rpx #999999 solid;
                border-bottom: 2rpx #999999 solid;
                transform: rotate(-45deg);
                margin-top: 30rpx;
              }
            }

          }
        }

        .content {
          display: flex;
          flex-direction: row;
            padding: 0 20rpx;
          .cont_L {
            width: 100%;
            .contElevar {
              padding: 30rpx 0rpx;
              font-size: 24rpx;
              display: flex;
              width: 100%;
              border-bottom: 2rpx #eee solid;
              .contElevar_Left {
                // flex: 0 0 480rpx;
							  margin-right: 20rpx;
                .contTitle {
                  .tit_img {
                    width: 32rpx;
                    height: 32rpx;
                    margin: 0rpx 10rpx 3rpx 0rpx;
                    vertical-align: bottom;
                  }
                }
                .info {
                  color: #666666;

                  text {
                    color: #cccccc;
                    margin: 0rpx 10rpx;
                  }
							}
              }
            }
           
          }
          
        }
        .content:last-child .cont_L:last-child .contElevar:last-child{
          border-bottom:none
        }
        
      }
    }
  }

}</style>